<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>员工管理页面</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main">

			<fieldset class="table-search-fieldset">
				<legend>搜索信息</legend>
				<div style="margin: 10px 10px 10px 10px">
					<form class="layui-form layui-form-pane" action="">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">用户名</label>
								<div class="layui-input-inline">
									<input id="keyword" type="text" name="name" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<button id="searchBtn" type="button"
									class="layui-btn layui-btn-primary" lay-submit
									lay-filter="data-search-btn">
									<i class="layui-icon"></i> 搜 索
								</button>
								<button id="addBtn" type="button" class="layui-btn">新增用户</button>
							</div>
						</div>
					</form>
				</div>
			</fieldset>

			<script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
            </div>
        </script>

			<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>


			<script type="text/html" id="currentTableBar">
				<a class="layui-btn layui-btn-warm layui-btn-radius layui-btn-xs data-count-reset" lay-event="reset">重置密码</a>
<%--            	<a class="layui-btn layui-btn-normal layui-btn-radius layui-btn-xs data-count-edit" lay-event="edit">修改信息</a>--%>
            	<a class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

			<!-- 定义了员工新增时弹出窗口时的模板 -->
			<script type="text/html" id="userForm">
			<form class="layui-form" action="" lay-filter="userForm">
				<div class="layui-form-item">
    				<div class="layui-input-inline">
      					<input type="hidden" id="id" name="id">
    				</div>
  				</div>

  				<div class="layui-form-item">
    				<label class="layui-form-label">用户名</label>
    				<div class="layui-input-inline">
      					<input type="text" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    				</div>
  				</div>

				<div class="layui-form-item">
    				<label class="layui-form-label">密码</label>
    				<div class="layui-input-inline">
      					<input type="password" value="123456" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
    				</div>
  				</div>

				<div class="layui-form-item">
    				<label class="layui-form-label">昵称</label>
    				<div class="layui-input-inline">
      					<input type="text" name="nickName" placeholder="请输入昵称" autocomplete="off" class="layui-input">
    				</div>
  				</div>

  				<div class="layui-form-item">
    				<label class="layui-form-label">性别</label>
    				<div class="layui-input-block">
						<input type="radio" name="sex" value="保密" title="保密" checked>
      					<input type="radio" name="sex" value="男" title="男">
      					<input type="radio" name="sex" value="女" title="女">
   		 			</div>
  				</div>

				<div class="layui-form-item">
    				<div class="layui-input-block">
      					<button id="saveBtn" type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
  				</div>

			</form>
        </script>

		</div>
	</div>
	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
	<script>
		layui
				.use(
						[ 'form', 'table', 'layer', 'laydate' ],
						function() {
							let $ = layui.jquery,
								form = layui.form,
								table = layui.table,
								layer = layui.layer,
								laydate = layui.laydate;

							// 搜索按钮绑定事件
							$("#searchBtn").on("click", function() {
								// table表格渲染数据
								table.render({
									elem : '#currentTableId',
									url : '/user?action=userList', // 发送请求的地址
									where : {
										keyword : $("#keyword").val()
									},
									cols : [ [ {
										field : 'id',
										title : 'ID',
										sort : true
									}, {
										field : 'name',
										title : '用户名'
									}, {
										field : 'nickName',
										title : '姓名'
									}, {
										field : 'sex',
										title : '性别'
									}, {
										field : 'createby',
										title : '创建人'
									}, {
										title : '操作',
										toolbar : '#currentTableBar',
										align : "center"
									} ] ],
									limits : [ 10, 15, 20, 25, 50, 100 ],
									limit : 10,
									page : true,
									skin : 'line'
								}); //end table.render
							}).click(); //end $("#searchBtn")

							// 新增按钮绑定事件
							$("#addBtn").on("click", function() {
								layer.open({
									type : 1,
									title : "添加用户",
									area : [ "420px", "400px" ],
									content : $("#userForm").html()
								});
								// 渲染表单
								form.render();
							});

							// 保存按钮绑定事件
							$("body").on("click", "#saveBtn", function() {
								// 打包form表单中的所有数据
								let data = form.val("userForm");
								data.action = 'save';
								if(data.name == null || data.name == "") {
									layer.msg("用户名不能为空！", {
										icon: 7,
										time: 1000
									});
									return false;
								}
								if(data.pwd == null || data.pwd == "") {
									layer.msg("密码不能为空！", {
										icon: 5,
										time: 1000
									});
									return false;
								}
								if(data.nickName == null || data.nickName == "") {
									layer.msg("昵称不能为空！", {
										icon: 7,
										time: 1000
									});
									return false;
								}
								// 发送请求把数据推送后台
								$.post("/user", data, function(res) {
									if (res.code == 0) {
										// 请求成功后  1、关窗口，2、点搜索
										layer.closeAll();
										$("#searchBtn").click();
									} else {
										layer.msg(res.msg,{
											icon: 2,
											time: 2000
										});
									}
									
								}); //end $.post
							}); //end $("#saveBtn")

							// 表格操作工具条时间
							table.on('tool(currentTableFilter)', function(obj) {
								//console.log(obj);
								// if (obj.event === 'edit') { // 点的是编辑
								// 	$.get("/user?action=edit&id=" + obj.data.id, function(u) {
								// 		if(u.code == 0){
								// 			layer.open({
								// 				type : 1,
								// 				title : "编辑用户",
								// 				area : [ "420px", "400px" ],
								// 				content : $("#userForm").html()
								// 			});
								//
								// 			// 数据回显
								// 			form.val("userForm", u.data);
								// 		} else {
								// 			layer.msg(u.msg, {
								// 				icon: 2,
								// 				time: 2000
								// 			});
								// 		}
								// 	}); //end $.get
								// 	// 渲染表单
								// 	form.render();
								// } //end if

								if (obj.event === 'delete') { // 点的是删除
									layer.confirm("您确定要删除该用户吗？", function() {
										// 通知后台删除该员工（发请求）
										$.post("/user", {
											action : 'del',
											id : obj.data.id
										}, function() {
											// 关窗口
											layer.closeAll();
											// 重现渲染一遍table表格数据
											$("#searchBtn").click();
										}); //end $.post
									}); //end layer.confirm

								} // end if

								if (obj.event === 'reset'){
									$("#searchBtn").click();
										layer.confirm("您确定要重置该用户的密码吗？", function() {
											// 通知后台删除该员工（发请求）
											$.post("user", {
												action : 'resetPwd',
												id : obj.data.id
											}, function (){
												// 关窗口
												layer.closeAll();
												// 提示重置成功
												layer.msg("重置成功！", {
													icon: 1,
													time: 1500
												});
											});


									}); //end layer.confirm

								}

							});

						});
	</script>

</body>
</html>